<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTML 简单路由</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../libs/bootstrap/4.0.0-beta.3/bootstrap.min.css">
    <script src="../../libs/jquery/3.2.1/jquery.slim.min.js"></script>
    <script src="../../libs/propper.js/1.13.0/umd/popper.min.js"></script>
</head>
<script>
    function Router() {
        this.routes = {};
        this.currentUrl = '';
    }
    Router.prototype.route = function (path, callback) {
        this.routes[path] = callback || function () { };
    }
    Router.prototype.refresh = function () {
        let currentUrl = location.hash.slice(1);
        console.log(currentUrl);
        this.currentUrl = currentUrl || '/';
        this.routes[this.currentUrl]();
    }
    //init 监听浏览器url hash更新事件
    Router.prototype.init = function () {
        window.addEventListener('load', this.refresh.bind(this), false);
        window.addEventListener('hashchange', this.refresh.bind(this), false);
    }
    //给window对象挂载属性
    window.Router = new Router();
    window.Router.init();
</script>

<body>
    <ul>
        <li>
            <a href="#/"></a>
        </li>
        <li>
            <a href="#/home">主页</a>
        </li>
        <li>
            <a href="#/about">详情页</a>
        </li>
    </ul>
</body>
<script src="../../libs/bootstrap/4.0.0-beta.3/bootstrap.min.js"></script>
<script type="text/javascript">
    var content = document.querySelector('body');
    Router.route('/', function () {
        console.log("这是主页");
    });
    Router.route('/home', function () {
        console.log("这是主页");
    });
    Router.route('/about', function () {
        console.log("这是详情页");
    });
</script>

</html>